import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { WeaTable, WeaPopoverHrm, WeaSelect, WeaLocaleProvider } from 'ecCom';
import { getCurrentHeight } from '../../../util/Util';
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核执行分析-按人员
 * jiansong 2019/6/12
 */
@inject("workerReportStore")
@observer
export default class WorkerReport extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            _height: getCurrentHeight(),
        }
        this.store = this.props.workerReportStore;
    }

    render() {
        let { _height } = this.state;
        let columns = [
            {
                title: getLabel('30042', '人员'), dataIndex: 'lastname', width: '10%', sorter: true,
                render: (text, record) => {
                    return <a href={'javaScript:openhrm(' + record.id + ');'} onClick={event => window.pointerXY(event)}>{text}</a>
                }
            },
            { title: getLabel(33553, '分部'), dataIndex: 'subcompanyname', width: '15%' },
            { title: getLabel(27511, '部门'), dataIndex: 'departmentname', width: '15%' }
        ];
        this.store.monthdata.forEach((element, index) => {
            columns.push({
                title: element, dataIndex: "month" + (index + 1), width: '5%',
                render: (text) => {
                    switch (text) {
                        case "0":
                            return this.getTag('#E1DBA8');
                        case "1":
                            return this.getTag('#268DE4');
                        case "3":
                            return this.getTag('#49C930');
                        case "4":
                            return this.getTag('#E51616');
                        case "-1":
                            return this.getTag('#CCCCCC');
                        case "n1":
                            return this.getTag('#000000');
                        case "n2":
                            return this.getTag('#666666');
                    }
                }
            })
        })
        let { tags, yearDatas, loading, queryParams, data, total } = this.store;
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@h3dfuv`} spinning={loading}>
                <div className={'wea-workrelate-performance-workReport'}>
                    <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@186bmd`} />
                    <div className='table-hearder'>
                        <span className='year-date'>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jd0fmt`}
                                options={yearDatas}
                                value={queryParams.year}
                                viewAttr={2}
                                onChange={(year) => this.yearChange(year)}
                            />
                            <span>
                                {getLabel('509105', '{year}年月度考核报表').replace('{year}', queryParams.year)}
                            </span>
                        </span>
                        <span className="tags">
                            {tags.map(item => {
                                return (
                                    <span className='tag'>
                                        <span className="tag-circle" style={{ backgroundColor: item.color }} />
                                        <span>{item.name}</span>
                                    </span>
                                )
                            })}
                        </span>
                    </div>

                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@br4sh0`}
                        columns={columns}
                        bordered={true}
                        dataSource={data}
                        scroll={{ y: _height - 265 }}
                        pagination={{
                            total: total,
                            showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                            current: queryParams.current,
                            showQuickJumper: true,
                            pageSize: queryParams.pageSize,
                            showSizeChanger: true,
                        }}
                        onChange={this.handleTableChange}
                    />
                </div>
            </Spin>
        )
    }

    //获取标签
    getTag = (color = 'red') => {
        return <div className='tag'>
            <div className={"tag-circle"} style={{ backgroundColor: color }} />
        </div>
    }

    //年份改变
    yearChange(year) {
        this.store.onSearchChange({ "year": year });
        this.store.getWorkerReportData();
    };

    //表格改变
    handleTableChange = (pagination, filters, sorter) => {
        this.store.onSearchChange({
            "current": pagination.current,
            "pageSize": pagination.pageSize,
            "sort": sorter.order != undefined ? (sorter.order == 'ascend' ? 'asc' : 'desc') : 'asc'
        });
        this.store.getWorkerReportData();
    };

}